<style lang="less">
    @import 'APPSlide.less';
</style>
<template>
    <div class="image-editor">
        <Row :gutter="10">
            <Col span="18">
            <Card class="slideList">
                <p slot="title" style="height: 25px">
                    <Icon type="ios-albums-outline"></Icon>
                    轮播列表(可编辑)
                    <Button type="success" size="small" @click="upSlideImg">上传轮播</Button>
                    <Button type="warning" size="small" @click="exportData">模拟轮播</Button>
                </p>
                <div class="edittable-table-height-con">
                    <Table :columns="slideTableHead" :data="bannerList" border :no-filtered-data-text="tipeNews" :no-data-text="tipeNews" ref="slideTableHead"></Table>
                </div>
                <Page :total="total" :current="page" :page-size="pageSize" @on-change="onCurrentChange" style="text-align: center"></Page>
            </Card>
            </Col>
            <Col span="6">
                <Card>
                <p slot="title">
                    <Icon type="ios-eye"></Icon>
                    模拟轮播
                </p>
                <!--iphone6s-->
                <div class="iphone">
                    <div class="iphone-top">
                        <span class="camera"></span>
                        <span class="sensor"></span>
                        <span class="speaker"></span>
                    </div>
                    <div class="top-bar"></div>
                    <div class="iphone-screen">
                        <div>
                            <Carousel loop autoplay radius-dot v-model="value2" :dots="setting.dots" :arrow="setting.arrow" :autoplay-speed="setting.autoplaySpeed">
                                <CarouselItem class="swiper-slide" v-for="str in modelImgList" :style="{ backgroundImage: 'url(' + str.imgUrl + ')' }"></CarouselItem>
                            </Carousel>
                        </div>
                    </div>
                    <div class="buttons">
                        <span class="on-off"></span>
                        <span class="sleep"></span>
                        <span class="up"></span>
                        <span class="down"></span>
                    </div>
                    <div class="bottom-bar"></div>
                    <div class="iphone-bottom">
                        <span></span>
                    </div>
                </div>
            </Card>
            </Col>
        </Row>
        <Modal v-model="eidtBanner" title="修改图片以外的其他内容" @on-ok="handleSubmit('bannerModel')" @on-cancel="handleReset('bannerModel')">
            <p style="color: rosybrown;margin: 0px 0px 10px 0px;font-size: 6px;">Tipe:提示图片只能删除（无修改）</p>
            <Form ref="bannerModel" :model="bannerModel" :rules="ruleValidate" :label-width="80">
                <FormItem label="权重" prop="sort">
                    <Input v-model="bannerModel.sort" placeholder="请输入权重(及排序顺序)" number/>
                </FormItem>
                <FormItem label="描述" prop="title">
                    <Input v-model="bannerModel.title" placeholder="请输入描述" />
                </FormItem>
                <FormItem label="跳转URL" prop="target">
                    <Input v-model="bannerModel.target" placeholder="请输入跳转URL" />
                </FormItem>
                <FormItem label="分组" prop="group" >
                    <Select v-model="bannerModel.group" style="width:100px">
                        <Option v-for="item in groupList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                //表头
                slideTableHead:[
                        {
                            title: '权重',
                            align: 'center',
                            key: 'sort',
                            "sortable": true,
                        },
                        {
                            title:'分组名称',
                                key:'group',
                            width:'120px',
                            align:'center',
                            filters: [
                            {label: '启动页', value: 1},
                            {label: '首页轮播',value: 2},
                            {label: '充值页面',value: 3},
                            {label: '广告位',value: 4}
                        ],
                            filterMultiple:false,
                            filterMethod (v,r){
                            if (v === 1) {
                                return r.group === 1;
                            } else if (v === 2) {
                                return r.group === 2;
                            }else if (v === 3) {
                                return r.group === 3;
                            }else if (v === 4) {
                                return r.group === 4;
                            }
                        },
                            render(h,params,index){
                            const row = params.row;
                            if(row.group==1){
                                return "启动页";
                            }else if(row.group==2){
                                return "首页轮播";
                            }else if(row.group==3){
                                return "充值页面";
                            }else if(row.group==4){
                                return "广告位";
                            }
                        },
                        },
                        {
                            title:'轮播图',
                                width:"100px",
                            align: 'center',
                            className:'bannerimg',
                            render: (h, params) => {
                            const row = params.row;
                            const bannerimg = row.imgUrl;
                            return h('img', {
                                attrs: {
                                    src:bannerimg,
                                },
                                style:{
                                    width:"100px",
                                    height:'50px'
                                }
                            });
                        }
                        },
                        {
                            title: '描述',
                                align: 'center',
                            key: 'title',
                        },
                        {
                            title: '跳转',
                                align: 'center',
                            key: 'target',
                        },
                        {
                            title: '操作',
                                key: 'action',
                            width: 190,
                            align: 'center',
                            render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.saveEdit(params.index)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteRow(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                value2: 0,
                setting: {
                    autoplaySpeed: 2000,
                    dots: 'inside',
                    arrow: 'never'
                },
                tipeNews:'暂无数据',
                selectURl:'/banner/list',
                addorUpURl:'/banner/saveoredit',
                deleteURl:'/banner/delete',
                TBannerVO:{
                    group:'',
                    title:''
                },
                bannerList: [],
                modelImgList:[],
                eidtBanner:false,
                bannerModel:{},
                groupList:[
                    {
                        value: 1,
                        label: '启动页'
                    },
                    {
                        value: 2,
                        label: '首页轮播'
                    },
                    {
                        value: 3,
                        label: '充值页面'
                    },
                    {
                        value: 4,
                        label: '广告位'
                    }
                ],
                ruleValidate: {
                    title: [
                        { required: true, message: '请输入描述', trigger: 'blur' },
                    ],
                    target: [
                        { required: true, message: '请输入跳转URL', trigger: 'blur' },
                    ]
                },
                total:0,
                pageSize:0,
                page:1,

            };
        },
        created () {
            this.getData();
        },
        methods: {
            //初始化时获取数据
            getData () {
                let self=this;
                self.$axios.get(self.selectURl+'?curr='+self.page).then((res) => {
                    self.bannerList = res.data.data.rows;
                    self.page = res.data.data.page;
                    self.pageSize = res.data.data.pagesize;
                    self.total = res.data.data.total;
                })
            },
            //上传轮播图片
            upSlideImg(){
                //跳转到上传图片页面
                this.$router.push({
                    name: 'upSlideImg'
                });
            },
            //模拟轮播获取数据
            exportData () {
                this.modelImgList = this.$refs.slideTableHead.rebuildData;
            },
            //编辑数据
            saveEdit(index){
                let self=this;
                self.bannerModel = self.bannerList[index];
                self.eidtBanner = true;

            },
            //删除
            deleteRow(index){
                let self=this;
                let bannerDele = self.bannerList[index];
                self.$axios.post(self.deleteURl+'/'+bannerDele.bannerId).then((res) => {
                    if (res.data.code==200){
                        self.$Message.success('恭喜您，礼物成功');
                        self.getData();
                    }else {
                        self.$Message.error('抱歉，删除失败。请稍后重试!');
                        self.getData();
                    }
                })
            },
            handleSubmit (name) {
                let self=this;
                self.eidtBanner=false;
                self.$axios.post(self.addorUpURl,self.bannerModel).then((res) => {
                    if (res.data.code==200){
                        self.$Message.success('恭喜您，修改成功');
                        self.getData();
                    }else {
                        self.$Message.error('抱歉，修改失败。请稍后重试!');
                        self.getData();
                    }
                });
            },
            handleReset (name) {
                let self=this;
                self.eidtBanner=false;
            },
            onCurrentChange(val){
                let self = this;
                self.page = val;
                self.getData();
            }


        },
    };
</script>

